<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#table {
				margin: 60px auto;
			}
			th {
				background: deepskyblue;
				color: white;
				height: 40px;
				width: 100px;
				border-right: 1px solid lightgrey;
			}
			#table td {
				width: 100px;
				height: 40px;
				color: dimgrey;
				text-align: center;
				border-right: 1px solid lightgrey;
			}
			.tr1 {
				background-color: lightgrey;	
			}
			.tr2 {
				background-color: lightslategrey;
			}
			.change {
				background-color: white;
			}
		</style>
	</head>
	<body>
		<table id="table" cellspacing="0">
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>课程</th>
				<th>成绩</th>
			</tr>
			<tr class="tr1">
				<td>1</td>
				<td>吕不韦</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr class="tr2">
				<td>2</td>
				<td>吕布</td>
				<td>日语</td>
				<td>100</td>
			</tr>
			<tr class="tr1">
				<td>3</td>
				<td>吕蒙</td>
				<td>营销学</td>
				<td>100</td>
			</tr>
			<tr class="tr2">
				<td>4</td>
				<td>吕尚</td>
				<td>数学</td>
				<td>100</td>
			</tr>
			<tr class="tr1">
				<td>5</td>
				<td>吕雉</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr class="tr2">
				<td>6</td>
				<td>吕超</td>
				<td>体育</td>
				<td>100</td>
			</tr>
		</table>
		<script>
			var trs=document.getElementsByTagName("tr");
			for(var i=1;i<trs.length;i++)
			{
				trs[i].s=i;
				trs[i].onmouseover=function(){
						this.className="change";
				}
				trs[i].onmouseout=function(){
					if(this.s%2==0)
					{
						this.className="tr2";
					}
					else
					{
						this.className="tr1";
					}
				}
			}
			
		</script>
	</body>
</html>
